<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" type="text/css" href="/static/css/login.css"/>
</head>
<body>
<div id="login">
    <h1>Login</h1>
    <form method="post" action="/login">
        <input id="userTel" type="text" required="required" placeholder="用户名" name="userTel"></input>
        <input id="userPwd" type="password" required="required" placeholder="密码" name="userPwd"></input>
        <button class="but" type="submit">登录</button>
    </form>
</div>
</body>
<style>
    html{
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-style: sans-serif;
    }
    body{
        width: 100%;
        height: 100%;
        font-family: 'Open Sans',sans-serif;
        margin: 0;
        background-color: #040231;
    }
    #login{
        position: absolute;
        top: 50%;
        left:50%;
        margin: -150px 0 0 -150px;
        width: 300px;
        height: 300px;
    }
    #login h1{
        color: #fff;
        text-shadow:0 0 10px;
        letter-spacing: 1px;
        text-align: center;
    }
    h1{
        font-size: 2em;
        margin: 0.67em 0;
    }
    input{
        width: 278px;
        height: 18px;
        margin-bottom: 10px;
        outline: none;
        padding: 10px;
        font-size: 13px;
        color: #fff;
        border-top: 1px solid #312E3D;
        border-left: 1px solid #312E3D;
        border-right: 1px solid #312E3D;
        border-bottom: 1px solid #090336;
        border-radius: 4px;
        background-color: #2D2D3F;
    }
    .but{
        width: 300px;
        min-height: 20px;
        display: block;
        background-color: #4a77d4;
        border: 1px solid #3762bc;
        color: #fff;
        padding: 9px 14px;
        font-size: 15px;
        line-height: normal;
        border-radius: 5px;
        margin: 0;
    }
</style>
<script>
    function goLogin(){

    }
</script>
</html>